<style lang=less>
	@import '../../../assets/public.less';
	@import './google_verify.less';
</style>
<template>
	<div class="google_verify">
		<div class="change_opwd_main_title">
			<h2 class="title" @click="go_back">账号安全</h2>
			<span>></span>
			<h2>绑定谷歌验证器</h2>
		</div>
		<div class="change_opwd_main_header">
			<h2>
				绑定谷歌验证器
				<!-- <span class="tishi">
					<i class="el-icon-info"></i>
					谷歌验证器是一款动态口令工具，工作原理类似短信动态验证。绑定后每30s生成一个动态验证码，验证码可用于登录，提现，修改安全设置等操作的安全验证
				</span> -->
			</h2>
		</div>
		<div class="form_warp">
			<div class="inner">
				<div class="tips">
					谷歌验证器是一款动态口令工具，工作原理类似短信动态验证。绑定后每30s生成一个动态验证码，验证码可用于登录，提现，修改安全设置等操作的安全验证
				</div>
				<div class="tips">
					<p class="info">
						<span>1</span>
						<span>下载谷歌验证器APP</span>
					</p>
					<p class="airticle">IOS用户登录App Store搜索“Authenticator”下载</p>
					<p class="airticle">安卓用户登录应用商店或使用手机浏览器搜索“谷歌验证器”下载</p>
					<p class="btns">
						<span class="btn">App Store</span>
						<span class="btn2">Google Play</span>
					</p>
				</div>
				<div class="tips">
					<p class="info">
						<span>2</span>
						<span>在谷歌验证器中添加密钥并备份</span>
					</p>
					<p class="airticle">打开谷歌验证器，扫描下方二维码或手动输入下述密钥添加验证令牌。</p>
					<p class="airticle">密钥用于手机更换或遗失时找回谷歌验证器，绑定前请务必将下述密钥备份保存</p>
					<div class="step2">
						<img :src="userData.QrCodeurl">
						<p>
							<span class="security">密钥</span><br>
							<el-input auto-complete="off" style="width:200px" id="addInput" v-model="userData.secretKey"></el-input>
							<!-- <input :value="userData.secretKey" ></input> -->
							<span @click="copy('addInput')">复制</span>
						</p>
					</div>
				</div>
				<div class="tips">
					<p class="info">
						<span>3</span>
						<span>输入谷歌验证器中6位验证码</span>
					</p>
					<el-form :model="userData" statu ref="userData" label-width="100px" class="demo-ruleForm" style="width:450px;">
						<el-form-item label="谷歌验证码" prop="realname">
							<el-input auto-complete="off" style="width:450px" v-model="userData.googleCode"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="tips">
					<p class="info">
						<span>4</span>
						<span>输入手机验证码</span>
					</p>
					<el-form  :model="userData" status-icon ref="userData" label-width="100px" class="demo-ruleForm" style="width:450px;">
						<el-form-item label="手机验证码" prop="realname">
							<el-input auto-complete="off" style="width:450px" v-model="userData.smsCode"></el-input>
							<span class="send" @click="getCode()">{{btnCode.time}}</span>
						</el-form-item>
						<el-button type="primary" @click="submitForm()">绑定</el-button>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userData: {
					QrCodeurl: '', //二维码
					secretKey: '', //密钥
					googleCode:'',//谷歌验证码
					smsCode:''//短信验证码
				},
				btnCode: {
					time: '获取验证码', //倒计时
					disabled: false
				},		
			};
		},
		methods: {
			//绑定执行函数
			submitForm(formName) {
				const _this=this;
				if(_this.userData.googleCode==''){
					_this.$public.msg('谷歌验证码不能为空','warning',_this)
					return false;
				}if(_this.userData.smsCode==''){
					_this.$public.msg('短信验证码不能为空','warning',_this)
					return false;
				}
				let _data={
					dyGoodleCommand:_this.userData.googleCode,
					code:_this.userData.smsCode
				}
				_this.$http.post(_this.$http.checkGoogleCommand,_data).then(res=>{
					if(res.data.status=='200'){
						_this.$public.msg(res.data.msg,'success',_this);
					}else{
						_this.$public.msg(res.data.msg,'success',_this);
					}
				})
			},
			getCode() {
				var _this = this;
				var mobile = sessionStorage.mobile;
				_this.btnCode.disabled = true;
				_this.$http.post(_this.$http.setGoogleMsg, {
					mobile: mobile,
					type: 4
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.$public.msg(response.data.msg, 'success', _this);
						_this.$public.setTime(_this); //倒计时函数封装
					} else {
						_this.btnCode.disabled = false;
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

				//请求接口 成功后执行此函数				

			},
			getQrCode(){
				const _this=this;
				_this.$http.get(_this.$http.createGoogleCommand,{params:{account:sessionStorage.getItem('account')}}).then(function(res){
					if(res.data.status=='200'){
						_this.userData.QrCodeurl=res.data.data.local_url;
						_this.userData.secretKey=res.data.data.command;
					}
				})
			},
			go_back() {
				var _this = this;
				_this.$router.go(-1); //返回上一层
			},
			copy: function(para) { // 复制函数
				var _this = this;
				var ele = document.getElementById(para);
				ele.select();
				document.execCommand("Copy");
				_this.$public.msg('复制成功', 'success', _this);
			},
			addFocus: function(para) {
				var _this = this;
				var ele = document.getElementById(para);
				ele.setAttribute('disabled', 'disabled');
			},
			addOut: function(para) {
				var _this = this;
				var ele = document.getElementById(para);
				ele.removeAttribute('disabled');
			},
		},
		created: function() {
			var _this = this;
			_this.getQrCode();
			_this.userData.mobile = sessionStorage.getItem('mobile');
			_this.$public.scrollTop(); //返回但最顶部函数
			
		}

	}
</script>

<style>

</style>